<template>
  <!--  密码登录页面-->
  <div class="box2">
    <div style="display: flex; flex-direction: column; align-items: center">
      <div style="margin-top: 40px">
        <h1>微课堂</h1>
      </div>
      <div class="login-password-item1">
        <div style="display: flex; width: 300px; justify-content: center">
          <div class="login-tab-item" @click="show('login_password')">
            密码登录
          </div>
          <div
            class="login-tab-line"
            style="margin-left: 15px; margin-right: 15px"
          ></div>
          <div class="login-tab-item" @click="show('login_message')">
            短信登录
          </div>
        </div>
        <div class="login-password-item2">
          <div class="login-password-item3">
            <div>
              <input
                style="font-size: 15px"
                v-model.trim="username"
                maxlength="11"
                name="username"
                type="text"
                placeholder="请输入用户名"
              />
            </div>
          </div>
          <div class="login-password-item4">
            <input
              v-model.trim="password"
              style="padding-left: 15px; font-size: 15px"
              name="password"
              placeholder="请输入密码"
              type="password"
              show-password
            />
          </div>
        </div>
        <div style="height: 40px; display: flex">
          <input
            @click="handlesave"
            id="yes"
            type="radio"
            value="0"
            style="margin-right: 10px"
          />
          <label for="yes" style="padding-top: 8px">保持登录状态</label>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div class="lr-button">
          <button
            type="primary"
            class="register-bt"
            @click.prevent="handleregister"
          >
            注册
          </button>
          <button class="login-bt" @click.prevent="handlelogin">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

const value1 = ref(false);

export default {
  name: "login_password",
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    handlelogin: function () {
      if (
        this.username === localStorage["username"] &&
        this.password === localStorage["password"]
      ) {
        this.$router.replace("/HomePage"); //如果输入的用户名以及密码正确路由跳转至个人页面
      } else if (this.username === "") {
        //名字为空
        alert("用户名不为空");
      } else if (this.password === "") {
        //密码为空
        alert("密码不为空");
      } else {
        alert("账号不存在，请注册后登录"); //查无此号
      }
    },
    handleregister: function () {
      this.$router.replace("/register"); //点击注册按钮，跳转至注册页面
    },
    //点击保持登录状态触发handlesave
    handlesave: function () {
      this.st = "true"; //修改登录状态为true
      localStorage.setItem("s", this.st);
      console.log(localStorage.s);
    },
    show(index) {
      if (index == "login_message") {
        this.$router.push("/login_message");
      }
      if (index == "login_password") {
        this.$router.push("/login_password");
      }
    },
  },
};
</script>

<style scoped></style>
